<template>
	<view class="user_info_warp">
	  <view v-if="userinfo.avatarUrl" class="user_img_wrap">
		<view class="user_info">
		  <image class="user_icon" :src="userinfo.avatarUrl"></image>
		  <view class="user_name">{{userinfo.nickName}}</view>
		</view>
	  </view>
	  <view v-else class="user_btn">
		<navigator url="/pages/login/index">登录</navigator>
	  </view>
	  <view >
	  	<button type="primary" @click="chooseImg">上传图片</button>
		<image v-for="item in imgArr" :key="item" :src="item"></image>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{
					
				},
				imgArr:[]
			}
		},
		onLoad() {

		},
		onShow() {
		    const userinfo = uni.getStorageSync('userInfo');
		    this.userinfo = userinfo	
		},
		methods: {
				
				chooseImg(){
				// 	uni.chooseImage({
				// 		count:5,
				// 		success(res) {
				// 			console.log(res)
				// 			this.imgArr = res.tempFilePaths
				// 			console.log(res)
				// 		}
				// 	})
					
					uni.chooseImage({
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							console.log(chooseImageRes)
							uni.uploadFile({
								url: 'http://localhost:3007/api/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes.data);
								},							
							
							});
						}
					});
					
					
					
				}

				
		}

		
	}
</script>

<style>
.user_info_warp{
  height: 45vh;
  overflow: hidden;
  background-color: #ffbdf7;
  position: relative;
}

.user_img_wrap{
  position: relative;
  background-color: #ffbdf7;
}
.user_bg{
  height: 50vh;
  filter: blur(10px);
}
.user_info{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 200rpx;
  text-align: center;
}
.user_icon{
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.user_name{
  color: #ffffff;
  margin-top: 40rpx;
  font-size: 40rpx;
}
.user_btn{
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  border: 1rpx solid greenyellow;
  color: greenyellow;
  font-size: 38rpx;
  padding: 30rpx;
  border-radius: 10rpx;
}
</style>
